<script setup>
import { Chart } from '@antv/g2'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      total: 0,
      usedCount: 0,
    }),
  },
  ready: {
    type: Boolean,
    default: false,
  },
})

let chartInstance = null
const chartDomRef = ref(null)

const state = reactive({
  isInited: false,
})

// 初始化渲染图表
const createChartView = (container, { height }) => {
  // console.log('%c%s', 'font-size:2em;background: #DD5644;color: #FFF', '尺寸', height)
  const chart = new Chart({
    container,
    // autoFit: true,
    height: height || 64,
    width: height || 64,
  })

  const ratio = props.data.usedCount / props.data.total

  chart.coordinate({ type: 'theta', radius: 1.0, innerRadius: 0.75 })

  chart
    .interval()
    // .data([props.data.total, props.data.usedCount])
    .data([1, ratio])
    .encode('y', d => d)
    .encode('color', (d, idx) => idx)
    .scale('y', {
      domain: [0, 1],
    })
    .style('fill', (d, idx) => {
      if(idx === 0) {
        return '#374A6E'
      }
      return 'linear-gradient(-90deg, #1EB4E3 0%, #1BF2C4 100%)'
    })
    .animate('enter', { type: 'waveIn' })
    .axis(false)
    .legend(false)
    .style('radius', 20)
    .theme({ type: 'custom' })

  chart.text().style({
    text: `${Number(props.data.usedCount / props.data.total * 100).toFixed(0)}%`,
    fill: '#fff',
    fontSize: 12,
    x: '50%',
    y: '50%',
    textAlign: 'center',
  })
  chart.interaction('tooltip', false)
  chart.render()

  state.isInited = true

  return chart
}

// 更新图表数据
const updateChartView = (chart) => {
  chart.changeData(props.data.orderList)

  // 重新渲染
  chart.render()
}

watch([() => props.data, () => props.ready], ([newData, newReady]) => {
  if(state.isInited && chartInstance) {
    // 已经初始化过图表, 直接更新数据
    // console.log('%c%s', 'font-size:2em;background: #00965E;color: #FFF', '更新图表数据', newData)
    updateChartView(chartInstance)
  }
  else {
    // 查看数据接口是否已经准备好
    if(props.ready || newReady) {
      if(newData && chartDomRef.value) {
        // 请求数据成功, 初始化图表
        const { width, height } = chartDomRef.value.getBoundingClientRect()
        chartInstance = createChartView(chartDomRef.value, { width, height })
        // console.log('%c%s', 'font-size:2em;background: #00965E;color: #FFF', '初始化图表', newData)
      }
      else {
        // 图标数据为空，更新初始化状态, 展示缺省空状态
        state.isInited = true
        // console.log('%c%s', 'font-size:2em;background: #DD5644;color: #FFF', '图表数据为空')
      }
    }
    else {
      // console.log('%c%s', 'font-size:2em;background: #DD5644;color: #FFF', '等待数据请求完成', newData)
    }
  }
}, { deep: true, immediate: true })
</script>

<template>
  <section class="store-bin">
    <div class="store-bin__wrap">
      <div class="chart-wrap">
        <div class="chart-container">
          <div ref="chartDomRef" class="panel-layout panel-layout--chart" />
        </div>
      </div>
      <div class="info-wrap">
        <div class="value">
          <n-number-animation :from="0" :to="parseInt(data.usedCount)" />
        </div>
        <div class="label">
          库位占用数量
        </div>
      </div>
    </div>
    <div class="bottom-bg" />
  </section>
</template>

<style lang='scss' scoped>
.store-bin {
  position: relative;
  height: 100%;
  padding: 16px 0;

  &__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 62px;
  }

  .chart-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    background-image: url('/src/assets/image/storage/chart-circle-wrap.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .chart-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    height: 88%;
    // transform: translate(-48.5%, -48.5%);
    transform: translate(-50%, -50%);
  }

  .info-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 67px;
    margin-left: 20px;
    background: linear-gradient(270deg,rgb(0 157 227 / 0%) 0%, rgb(0 157 227 / 58%) 46%, rgb(0 157 227 / 0%));

    .value {
      width: 60%;
      font-size: 26px;
      font-weight: 600;
      line-height: 1;
    }

    .label {
      width: 60%;
      font-size: 16px;
      color: #AFF1FF;
    }
  }
}

.panel-layout {
  &--chart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}
</style>
